<template>
    <div class="settings-widget">
        <div class="settings-inner-blk p-0">
            <div class="sell-course-head comman-space">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h3>我的班级</h3>
                        <p>您累积教授班级：143，正在教授的班级：12</p>
                    </div>
                    <div class="ticket-btn-grp">
                        <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addclass">创建班级</a>
                        <!-- <nuxt-link to="/teacher/class-add" class="btn btn-primary">
                                创建班级
                            </nuxt-link> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="showing-list">
        <div class="row">
            <div class="col-lg-6">
                <div class="d-flex align-items-center">
                    <div class="view-icons">
                        <a href="course-grid.html" class="grid-view active"><i class="feather-grid"></i></a>
                        <a href="course-list.html" class="list-view"><i class="feather-list"></i></a>
                    </div>
                    <div class="show-result">
                        <h4>Showing 1-9 of 50 results</h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="show-filter add-course-info">
                    <form action="#">
                        <div class="row gx-2 align-items-center">
                            <div class="col-md-6 col-item">
                                <div class=" search-group">
                                    <i class="feather-search"></i>
                                    <input type="text" class="form-control" placeholder="输入关键字">
                                </div>
                            </div>

                            <div class="col-md-6 col-lg-6 col-item">
                                <div class="form-group select-form mb-0">
                                    <select class="form-select select" id="sel1" name="sellist1">
                                        <option>进行中 </option>
                                        <option>已结课</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div v-for="item in list" :key="item.id" class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                        <div class="price">
                            <h3>线下</h3>
                        </div>
                    </div>
                    <div class="product-content">

                        <h3 class="title"><a href="course-details.html">{{item.title}}</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12个课时</p>

                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9名学生</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <div class="all-btn all-category d-flex align-items-center">
                                    <nuxt-link :to="'/teacher/class-detail?id='+item.id" class="btn btn-primary">
                                        进入班级
                                    </nuxt-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange"/>

    <div class="modal-styles modal fade" id="addclass" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加班级</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="addpaymethod-form add-course-info">
                        <form action="#">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-control-label">班级名称</label>
                                        <input type="text" v-model="formData.title" class="form-control"
                                            placeholder="请输入班级名称">
                                    </div>
                                    <app-class-level v-model="formData.level"></app-class-level>
                                    <div class="form-group">
                                        <label class="form-control-label">教学科目</label>

                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiosubject" value="scratch"
                                                    v-model="formData.subject">
                                                <span class="checkmark"></span> Scratch
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiosubject" value="python"
                                                    v-model="formData.subject">
                                                <span class="checkmark"></span> Python
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiosubject" value="c++"
                                                    v-model="formData.subject">
                                                <span class="checkmark"></span> C++
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">授课类型</label>
                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" value="online"
                                                    v-model="formData.learnMethod">
                                                <span class="checkmark"></span> 线上
                                            </label>
                                            <label class="radio-inline custom_radio">
                                                <input type="radio" name="optradio" value="offline"
                                                    v-model="formData.learnMethod">
                                                <span class="checkmark"></span> 线下
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">班级类型</label>

                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiotype" value="regular"
                                                    v-model="formData.type">
                                                <span class="checkmark"></span> 常规
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiotype" value="training"
                                                    v-model="formData.type">
                                                <span class="checkmark"></span> 集训
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiotype" value="trial"
                                                    v-model="formData.type">
                                                <span class="checkmark"></span> 试听
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-theme" @click="save">保存</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange" />

</template>

<script setup>
const userInfo = useUseInfo()
const list = ref([])
const total = ref(0)
const params = reactive({
    pageIndex: 1,
    pageSize: 10
})
const formData = reactive({
    title: '测试',
    level: 'la',
    type: 'training',
    subject: 'scratch',
    learnMethod: 'online'
})

const save = async () => {
    const p = Object.assign({}, formData, {teacherID: userInfo.value.user.id, tenantID: userInfo.value.user.tenantID});
    await classApi.add(p)
    $('#addclass').modal('hide')
    search()
}
const pageChange = async (e) => {
    params.pageIndex = e
    await search()
}
const edit = (e) => {
    formData.title = e.title
    formData.telephone = e.telephone
    formData.type = e.type
    $('#addclass').modal('show')
}
const del = async (e) => {
    await classApi.del(e)
    search()
    console.log(e)
}
const search = async () => {
    const res = await classApi.getList(params.pageIndex, params.pageSize)
    console.log(res)
    list.value = res.list
    total.value = res.pager.total

}
onMounted(async () => {
    await nextTick();
    search()

})
</script>

<style scoped>
.course-info {
    border-bottom: 0px solid #C7C7C7;
    padding-bottom: 0px;
}
</style>